<template>
    <div class="withdraw-apply">
        <div v-if="bankAccount && bankAccount.length" class="withdraw-apply__manage" @click="onClickManage">
            <span v-if="mode === 'normal'">管理</span>
            <span v-else>完成</span>
            <span class="icon">&#xe62f;</span>
        </div>

        <div class="withdraw-apply__list">
            <div v-for="(item, index) in bankAccount"
                :key="index"
                class="withdraw-apply__list-item"
                :class="{'withdraw-apply__list-item--active': mode === 'normal' ? selectedAccountId === item.id : selectedDeleteIds[item.id]}">
                <span class="withdraw-apply__list-icon" @click="onSelectAccount(item)">
                    <i v-if="mode === 'normal'" class="icon">{{selectedAccountId === item.id ? '&#xe69e;' : '&#xe637;'}}</i>
                    <i v-else class="icon">{{selectedDeleteIds[item.id] ? '&#xe69e;' : '&#xe637;'}}</i>
                </span>
                <div class="withdraw-apply__list-info" @click="onClickEditAccount(item)">
                    <div class="withdraw-apply__list-no">
                        <span class="withdraw-apply__list-label">银行卡号</span>
                        {{item.no}}
                    </div>
                    <div class="withdraw-apply__list-bank">
                        <span class="withdraw-apply__list-label">开户行</span>
                        {{item.bank_name}}
                    </div>
                    <div class="withdraw-apply__list-name">
                        <span class="withdraw-apply__list-label">开户人</span>
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>

        <template v-if="mode === 'normal'">
            <div v-if="bankAccount && bankAccount.length" class="btn-wrap">
                <MobileButton name="green"
                    class="withdraw-apply__btn btn-large"
                    :class="{disabled: !canWithdraw}"
                    @click="onClickWithdraw">
                    立即提现至该银行卡
                </MobileButton>
            </div>

            <div class="withdraw-apply__hint">
                账户可提现金额：{{this.account | currency}}元 每日提现上线3000元
            </div>

            <div class="withdraw-apply__action">
                <div class="withdraw-apply__action-btn" @click="onClickEditAccount()">新增银行卡</div>
            </div>
        </template>
        <template v-else>
            <div class="btn-wrap">
                <MobileButton name="green"
                    class="withdraw-apply__btn btn-large"
                    @click="onClickDelete">
                    确认删除
                </MobileButton>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
import SlideNav from '@/components/nav/slideNav.vue';
import store from '@/store';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { api } from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'UserWithdrawApply',
    components: {
        SlideNav,
    },
})
export default class UserWithdrawApply extends Vue {
    /** 选择使用的账户id */
    public selectedAccountId: number | null = null;
    /** 选择等待删除的账户id */
    public selectedDeleteIds: { [id: number]: boolean } = {};
    public mode: 'normal' | 'delete' = 'normal';

    /** 账户金额 */
    public get account() {
        return store.state.user.account;
    }
    /** 银行账户 */
    public get bankAccount() {
        return store.state.user.bankAccount;
    }
    /** 是否可以提现 */
    public get canWithdraw() {
        return this.selectedAccountId && this.account > 0;
    }

    @Watch('mode')
    public onMode() {
        if (this.mode === 'normal') {
            // 清空
            this.selectedDeleteIds = {};
        }
    }

    public onSelectAccount(item: User.BankAccount) {
        if (this.mode === 'normal') {
            this.selectedAccountId = item.id;
        } else {
            Vue.set(this.selectedDeleteIds, item.id, !this.selectedDeleteIds[item.id]);
        }
    }
    /**
     * 添加银行卡
     */
    public onClickEditAccount(item?: User.BankAccount) {
        const params: any = {};
        if (item) {
            params.accountId = item.id;
        }
        api.push({
            name: ROUTE_NAME.USER_ACCOUNT_EDIT,
            params,
        });
    }
    /**
     * 点击提现
     */
    public async onClickWithdraw() {
        if (!this.canWithdraw) {
            return;
        }
        store.commit('utils/startRequest');
        const res = await store.dispatch('user/withdraw', {
            accountId: this.selectedAccountId,
        });
        if (res.statusCode === 200 && res.data.status === 0) {
            wx.showToast({
                title: '提现成功',
                icon: 'success',
            });
            store.dispatch('user/getAccount');
            setTimeout(() => {
                wx.navigateBack();
            }, 2000);
        } else {
            store.commit('utils/endRequest');
        }
        store.commit('utils/endRequest');
    }
    /**
     * 点击管理
     */
    public onClickManage() {
        this.mode = this.mode === 'delete' ? 'normal' : 'delete';
    }
    /**
     * 点击删除
     */
    public async onClickDelete() {
        store.commit('utils/startRequest');
        const ids = Object.keys(this.selectedDeleteIds).filter((id) => this.selectedDeleteIds[id]);
        for (const id of ids) {
            const rdata = await store.dispatch('user/deleteBankAccount', {
                id,
            });
            if (rdata.status !== 0) {
                wx.showToast({
                    title: rdata.message,
                    icon: 'none',
                });
                store.commit('utils/endRequest');
                return;
            }
        }
        store.commit('utils/endRequest');
        wx.showToast({
            title: '删除成功',
            icon: 'success',
        });
        this.mode = 'normal';
    }

    public async created() {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('user/getBankAccount'),
            store.dispatch('user/getAccount'),
        ]);
        store.commit('utils/endRequest');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.withdraw-apply {
    min-height: 100%;
    background-color: @default-bg-color;

    &__manage {
        padding: 20px 15px 10px;
        .text-normal();
        color: @color-font-3;
        text-align: right;
        .icon {
            margin-left: 5px;
        }
    }

    &__action {
        padding: 10px 0 5px;
        text-align: center;
        &-btn {
            display: inline-block;
            min-width: 250px;
            padding: 5px 0;
            .text-normal();
            color: #E4C162;
            border: 1px solid #E4C162;
            box-sizing: border-box;
            border-radius: 8px;
        }
    }
    &__list {
        padding: 5px 0;
        &-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            padding: 5px 14px;

            &--active {
                .withdraw-apply__list-info {
                    background-color: fade(@color-blue, 20%);
                    border: 1px solid @color-blue;
                    &:after {
                        background-color: @color-blue;
                    }
                }
            }
        }
        &-icon {
            position: relative;
            display: inline-block;
            width: 44px;
            color: #666;
            .icon {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        &-info {
            flex: 1;
            position: relative;
            padding: 20px 0 34px 25px;
            color: #666;
            background-color: #efefef;
            border: 1px solid #bbb;
            // box-shadow: 0 1px 6px 0 rgba(0,0,0,0.46);
            border-radius: 8px;
            &:after {
                position: absolute;
                content: '';
                display: inline-block;
                left: 0;
                right: 0;
                bottom: 0;
                height: 14px;
                width: 100%;
                background-color: #bbb;
                border-radius: 0 0 8px 8px;
                z-index: 1;
            }
        }
        &-bank {
            .text-normal();
            // color: #E4C162;
        }
        &-no {
            .text-normal();
            // color: #E4C162;
        }
        &-name {
            .text-normal();
            // color: #E4C162;
        }
        &-label {
            display: inline-block;
            width: 70px;
        }
    }
    .btn-wrap {
        padding: 10px 24rpx;
        text-align: center;
    }

    &__btn {
        min-width: 198px;
        padding: 10px 15px;
        .text-normal();
        text-align: center;
        box-sizing: border-box;
        border-radius: 8px;
    }
    &__hint {
        padding: 5px 0;
        .text-small();
        color: #999;
        text-align: center;
    }
}

</style>
